<template>
    <form id="searchForm" action="search">
        <div class="searchHeader">
            <span v-on:click="back()" class="iconfont">&#58897;</span>
            <div class="search_container">
                <input class="searchinput" type="text" v-model="value" :placeholder="word">
                <i v-on:click="select(value)" class="search_button iconfont">&#58895;</i>
            </div>
        </div>
    </form>
</template>

<script>
export default {
    props: {
        word: {
            default: function() {
                return ''
            }
        }        
    },  
    data() {
        return {
            value: ''
        }
    },
    watch: {
        value: function(value) {
            this.$emit('change', value)
        }
    },
    methods: {
        select(value) {
            this.$router.push({path: 'list', query: {word: value}})
        },
        back() {
            this.$router.push('/')
        }
    }
}
</script>

<style>
</style>